<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-cell
					title="Lists 数组类型数据"
					:desc="values1.length ? values1.join(' / ') : '请选择'"
					showArrow
					@onClick="show1 = true"
				></pure-cell>
				<pure-gap></pure-gap>

				<pure-cell
					title="Children 级联类型数据"
					:desc="values2.length ? values2.join(' / ') : '请选择'"
					showArrow
					@onClick="show2 = true"
				></pure-cell>

				<pure-picker
					dataMode="lists"
					:list="lists"
					:values="values1"
					:cols="2"
					:show="show1"
					@onOk="handleOk1"
					@onNot="show1 = false"
					@onClose="show1 = false"
				></pure-picker>

				<pure-picker
					dataMode="children"
					:list="list"
					:values="values2"
					:cols="2"
					:show="show2"
					@onOk="handleOk2"
					@onNot="show2 = false"
					@onClose="show2 = false"
				></pure-picker>
			</pj-demo>

			<!-- 显示列数 -->
			<pj-demo title="显示列数">
				<pure-cell
					title="一列"
					:desc="values3.length ? values3.join(' / ') : '请选择'"
					showArrow
					@onClick="show3 = true"
				></pure-cell>

				<pure-picker
					dataMode="children"
					:list="list"
					:values="values3"
					:cols="1"
					:show="show3"
					@onOk="handleOk3"
					@onNot="show3 = false"
					@onClose="show3 = false"
				></pure-picker>
			</pj-demo>

			<!-- 显示行数 -->
			<pj-demo title="显示行数">
				<pure-cell
					title="5行"
					:desc="values4.length ? values4.join(' / ') : '请选择'"
					showArrow
					@onClick="show4 = true"
				></pure-cell>

				<pure-picker
					dataMode="children"
					:list="list"
					:values="values4"
					:cols="2"
					:rows="5"
					:show="show4"
					@onOk="handleOk4"
					@onNot="show4 = false"
					@onClose="show4 = false"
				></pure-picker>
			</pj-demo>

			<!-- 实现省市区选择 -->
			<pj-demo title="实现省市区选择">
				<pure-cell
					title="选择地址"
					:desc="values5.length ? values5.join(' / ') : '请选择'"
					showArrow
					@onClick="show5 = true"
				></pure-cell>

				<pure-picker
					:list="regionData"
					:values="values5"
					value-key="label"
					:cols="3"
					:show="show5"
					@onOk="handleOk5"
					@onNot="show5 = false"
					@onClose="show5 = false"
				></pure-picker>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
	import { regionData } from "element-china-area-data";

	// 显示状态
	const show1 = ref(false);
	const show2 = ref(false);
	const show3 = ref(false);
	const show4 = ref(false);
	const show5 = ref(false);

	// 选中项数据
	const values1 = ref([]);
	const values2 = ref([]);
	const values3 = ref([]);
	const values4 = ref([]);
	const values5 = ref(["山东省", "济南市", "历下区"]);

	// lists 模式数据
	const lists = ref([]);

	// children 模式数据
	const list = ref([]);

	onLoad(() => {
		generateLists();
		generateChildren();
	});

	// 生成 lists 数据
	function generateLists() {
		const _lists = [];

		for (let i = 0; i < 2; i++) {
			const _list = [];
			for (let j = 0; j < 10; j++) {
				_list.push({
					label: `列${i + 1}项${j + 1}`,
					value: `列${i + 1}项${j + 1}`
				});
			}
			_lists.push(_list);
		}
		lists.value = _lists;
	}

	// 生成 children 数据
	const generateChildren = () => {
		const _list = [];
		for (let i = 0; i < 10; i++) {
			const _children = [];
			for (let j = 0; j < 10; j++) {
				_children.push({
					label: `项目${j + 1}`,
					value: `项目${j + 1}`
				});
			}
			_list.push({
				label: `类型${i + 1}`,
				value: `类型${i + 1}`,
				children: _children
			});
		}
		list.value = _list;
	};

	// 选择事件
	function handleOk1(_indexes, _items) {
		console.log("onOk", _indexes, _items);
		values1.value = _items.map((item) => item.value);
		show1.value = false;
	}

	// 选择事件
	function handleOk2(_indexes, _items) {
		console.log("onOk", _indexes, _items);
		values2.value = _items.map((item) => item.value);
		show2.value = false;
	}

	// 选择事件
	function handleOk3(_indexes, _items) {
		console.log("onOk", _indexes, _items);
		values3.value = _items.map((item) => item.value);
		show3.value = false;
	}

	// 选择事件
	function handleOk4(_indexes, _items) {
		console.log("onOk", _indexes, _items);
		values4.value = _items.map((item) => item.value);
		show4.value = false;
	}

	// 选择事件
	function handleOk5(_indexes, _items) {
		console.log("onOk", _indexes, _items);
		values5.value = _items.map((item) => item.label);
		show5.value = false;
	}
</script>

<style lang="scss" scoped></style>
